<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>蓝桥老虎机</title>  
    <link rel="stylesheet" href="./css/index.css" /> 
  </head> 
  <body> 
    <div id="app">  
        <div class="textPanel">蓝桥老虎机</div>
        <div class="panel">
            <div class="range">
                <ul id="sevenFirst" class="bar bar-one">
                    
                </ul>
                <ul id="sevenSecond" class="bar bar-two">
                      
                </ul>
                <ul id="sevenThird" class="bar bar-three">
                     
                </ul>
            </div> 
        </div>
        <div class="startBtn">开始</div>
    </div>
    <div class="fireworks"><img src="images/fireworks.png"></div>
    <div class="fireworks"><img src="images/fireworks.png"></div>
    <div class="fireworks"><img src="images/fireworks.png"></div> 
    <input type="hidden" id="random1">
    <input type="hidden" id="random2">
    <input type="hidden" id="random3">
    <script> 
	    // 获取DOM元素对象 
        const open = document.getElementById('open')  
        const sevenFirst = document.getElementById('sevenFirst')  
        const sevenSecond = document.getElementById('sevenSecond')  
        const sevenThird = document.getElementById('sevenThird')  
        const random1 = document.getElementById('random1')  
        const random2 = document.getElementById('random2')  
        const random3 = document.getElementById('random3')  
        const startBtn = document.querySelector('.startBtn')   
        const textPanel = document.querySelector('.textPanel')   
        const fireworks = document.querySelectorAll('.fireworks')    
        
        class Game {
            constructor() {
                this.images = [
                    "./images/point-1.png",
                    "./images/point-2.png",
                    "./images/point-3.png",
                    "./images/point-4.png",
                    "./images/point-5.png",
                    "./images/point-6.png",
                    "./images/point-7.png",
                ]
                // 第一栏水果数量
                this.FirstRandom = 40;
                this.SecondRandom = this.FirstRandom + 2;
                this.ThirdRandom = this.SecondRandom + 2;
                // 每一张水果图片高度
                this.heightPic = 271;
                this.Generate()
            } 
            // 生成三列水果排列
            Generate() {
                let line_one = [];
                let line_two = [];
                let line_three = [];
                let randomNum  = 0; 
                // 第一列
                for(let i = 0; i < this.FirstRandom; i++) {
                    randomNum = this.Random(0,this.images.length)
                    let path = this.images[randomNum]
                    let tmp = path.split("-")
                    let num = tmp[1].replace('.png','');
                    sevenFirst.innerHTML += '<li class="item" data-point="' + num + '"><img src="' + path + '"></li>'
                }
                sevenFirst.style.height = this.heightPic * this.FirstRandom + "px";
                sevenFirst.style.marginTop = -(this.heightPic * this.FirstRandom - this.heightPic) + "px";
                // 第二列
                for(let i = 0; i < this.SecondRandom; i++) {
                    randomNum = this.Random(0,this.images.length)
                    let path = this.images[randomNum]
                    let tmp = path.split("-")
                    let num = tmp[1].replace('.png','');
                    sevenSecond.innerHTML += '<li class="item" data-point="' + num + '"><img src="' + path + '"></li>'
                }
                sevenSecond.style.height = this.heightPic * this.SecondRandom + "px";
                sevenSecond.style.marginTop = -(this.heightPic * this.SecondRandom - this.heightPic) + "px";
                // 第三列
                for(let i = 0; i < this.ThirdRandom; i++) {
                    randomNum = this.Random(0,this.images.length)
                    let path = this.images[randomNum]
                    let tmp = path.split("-")
                    let num = tmp[1].replace('.png','');
                    sevenThird.innerHTML += '<li class="item" data-point="' + num + '"><img src="' + path + '"></li>'
                }
                sevenThird.style.height = this.heightPic * this.ThirdRandom + "px";
                sevenThird.style.marginTop = -(this.heightPic * this.ThirdRandom - this.heightPic) + "px";
                
            } 
            // 随机数
            Random(start, length) {
                return Math.floor(Math.random() * (length - start)) + start;
            }
            // 初始化页面内容
            Init() {
                sevenFirst.innerHTML = ""
                sevenSecond.innerHTML = ""
                sevenThird.innerHTML = ""
                fireworks[0].classList.remove('f1')
                fireworks[1].classList.remove('f2')
                fireworks[2].classList.remove('f3')
            }
            // 开始
            Spin() {
                this.Init()
                this.Generate();
                console.log(sevenFirst);
                let random = this.Random(10,this.FirstRandom - 20)
                let r2 = random + 2;
                let r3 = random + 6; 

                setTimeout(() => {
                    sevenFirst.style.height = this.heightPic * random + this.heightPic+ "px";
                    sevenFirst.style.marginTop = -(this.heightPic * random) + "px";

                    sevenSecond.style.height = this.heightPic * r2 + this.heightPic+ "px";
                    sevenSecond.style.marginTop = -(this.heightPic * r2) + "px";

                    sevenThird.style.height = this.heightPic * r3 + this.heightPic+ "px";
                    sevenThird.style.marginTop = -(this.heightPic * r3) + "px";
                }, 1000)
                // 滚动动画
                sevenFirst.animate([{ marginTop: -this.heightPic * random + "px" }],{duration: random * 100})
                sevenSecond.animate([{ marginTop: -this.heightPic * r2 + "px" }],{duration: r2 * 100})
                sevenThird.animate([{ marginTop: -this.heightPic * r3 + "px" }],{duration: r3 * 100})
                 
                random1.value = random;
                random2.value = r2;
                random3.value = r3;
                this.GetResult(random, r2, r3)
            }
            // TODO 实现中奖结果
            GetResult(r1, r2, r3) { 
                let firstSelected = document.querySelector(`#sevenFirst>li:nth-child(${r1+1})`); 
                console.log(firstSelected.getAttribute("data-point"));
                let n1 = firstSelected.getAttribute("data-point") 
                let secondSelected = document.querySelector(`#sevenSecond>li:nth-child(${r2+1})`); 
                console.log(secondSelected.getAttribute("data-point"));
                let n2 = secondSelected.getAttribute("data-point")  
                let thirdSelected = document.querySelector(`#sevenThird>li:nth-child(${r3+1})`); 
                console.log(thirdSelected.getAttribute("data-point"));
                let n3 = thirdSelected.getAttribute("data-point")  
                setTimeout(() => {
                    if(n1 == n2 &&  n1 == n3 && n2 == n3) {
                        textPanel.innerText = "恭喜你，中奖了"
                        console.log("中奖了");
                        fireworks[0].classList.add('f1')
                        fireworks[1].classList.add('f2')
                        fireworks[2].classList.add('f3')
                    } else {
                        textPanel.innerText = "很遗憾，未中奖"
                    }
                }, 1000); 
            }
        }
        const game = new Game()
        startBtn.addEventListener('click',()=> {
             game.Spin()
             console.log(fireworks[0]);
        })
    </script>
  </body>
</html>
